<template>
    <div class="mb-3">
        <div class="nav-icon bg-white  mb-2 text-dark-1 pt-3 text-center">
            <div class="d-flex flex-wrap">
                <div v-for="(rec,index) in recInfo" :key="index" class="nav-item mb-3  py-2">
                    <div style="height:2.3077rem"><i class="sprite" :class="`sprite-${rec.icon}`"></i></div>
                    <div>{{rec.title}}</div>
                </div>
            </div>
            <div class="bg-light py-2">
                <i class="sprite sprite-arrow mr-1"></i>
                <span>收起</span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name:'HomeRecommend',
        data(){
            return {
                recInfo:[
                    {icon:'news',title:'爆料站'},
                    {icon:'stories',title:'故事站'},
                    {icon:'shop',title:'周边商城'},
                    {icon:'expe',title:'体验服'},
                    {icon:'newp',title:'新人专区'},
                    {icon:'mock',title:'荣耀·传承'},
                    {icon:'news',title:'模拟战资料库'},
                    {icon:'news',title:'王者营地'},
                    {icon:'news',title:'公众号'},
                    {icon:'news',title:'版本介绍'},
                    {icon:'news',title:'对局环境'},     
                    {icon:'news',title:'无限王者团'},
                    {icon:'news',title:'创意互动营'},
                ]
            }
        }
    }
</script>

<style scoped lang="scss">
@import 'assets/scss/_variables.scss';

.nav-icon{
    border-top: 1px solid $border-color;
    border-bottom: 1px solid $border-color;
}

.nav-item{
    width: 25vw;
    border-right: 1px solid $border-color;
    &:nth-child(4n){
        border-right: none;
    }
}

</style>